<template>
    <div class="addacademy">
        <div class="title">院校信息管理</div>
        <!-- 卡片 -->
        <el-card class="el-card">
            <!-- tab标签页 -->
                 <!-- @tab-click="handleClick" -->
            <el-tabs v-model="activeName" class="demo-tabs">
                <!-- 院校基本信息 -->
                <el-tab-pane label="院校基本信息" name="first" style="font-size:16px">
                    <!-- 院校基本信息--内容  Form表单-->
                    <el-form
                      :model="schoolInfo"
                      :rules="addRules"
                      ref="addRuleFormRef"
                    >
                        <el-form-item label="学校名称：" prop="name">
                            <!-- Input 输入框 -->
                            <el-input v-model="schoolInfo.name" autocomplete="off"/>
                        </el-form-item>
    
                        <el-form-item label="学校logo：" class="schoolLogo" prop="img">
                            <!-- Upload 上传 -->
                            <el-upload
                                class="upLoad"
                                v-model:file-list="fileList"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                            >
                                <el-icon><Plus style="width:100%;height:100%;"/></el-icon>
                                <div>上传照片</div>
                            </el-upload>
                            <div class="tips">支持格式：.jpg.png.svg.gif,单个文件不能超过5MB</div>
                            <el-dialog v-model="dialogVisible">
                                <img w-full :src="dialogImageUrl" alt="Preview Image" />
                            </el-dialog>
                        </el-form-item>

                        <el-form-item label="办学年份：" prop="year">
                            <el-input v-model="schoolInfo.year"/>
                        </el-form-item>

                        <el-form-item label="所在省份：" prop="provice">
                            <el-input v-model="schoolInfo.provice"/>
                        </el-form-item>

                        <el-form-item label="所在城市：" prop="city">
                            <el-input v-model="schoolInfo.city"/>
                        </el-form-item>

                        <el-form-item label="所属批次：" prop="batch">
                            <el-input v-model="schoolInfo.batch"/>
                        </el-form-item>

                        <el-form-item label="学校类别：" prop="category">
                            <!-- 单选 -->
                            <el-checkbox-group v-model="schoolInfo.category"  :max="1">
                                <el-checkbox v-for="(item,index) in category" :key="index" :label="item" name="category">{{item}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>

                        <el-form-item label="学校性质：" prop="nature">
                            <!-- 单选 -->
                            <el-checkbox-group v-model="schoolInfo.nature"  :max="1">
                                <el-checkbox v-for="(item,index) in nature" :key="index" :label="item" name="nature">{{item}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>

                         <el-form-item label="学校特色：" prop="spelice">
                            <!-- 单选 -->
                            <el-checkbox-group v-model="schoolInfo.spelice"  :max="1">
                                <el-checkbox v-for="(item,index) in spelice" :key="index" :label="item" name="especially">{{item}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>

                        <el-form-item class="nextPage">
                            <!-- 按钮 -->
                            <el-button type="success" @click="nextPage('second')" style="width:80px;background:#27B148">下一页</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <!-- 其他信息 -->
                <el-tab-pane label="其他信息" name="second">
                    <el-form  
                      class="moreInfo" 
                      :model="schoolInfo"
                      :rules="addRules"
                      ref="addRuleFormRef"
                    >
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item label="学校地址：" class="schoolAddress">
                                    <el-input v-model="schoolInfo.schoolAddress"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="学校官网：" prop="schoolNet">
                                    <el-input  v-model="schoolInfo.schoolNet"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="学校电话："  prop="schoolTel">
                                    <el-input  v-model="schoolInfo.schoolTel"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="学校邮箱：" prop="schollEmail">
                                    <el-input  v-model="schoolInfo.schollEmail"/>
                                </el-form-item>
                            </el-col>
                        </el-row> 
                        <el-form-item label="学校简介：" class="schoolInfo">
                            <el-input
                                v-model="text"
                                type="textarea"
                                rows:5
                                style="width:450px;height:145px;"
                                placeholder="请输入内容"
                                resize="none"
                                maxlength="1000"
                                show-word-limit
                            />
                        </el-form-item>
                        <el-form-item label="招生计划：" class="editorPlan">
                            <el-date-picker value-format="YYYY" v-model="fileYear" type="year" placeholder="选择年份" style="width:150px;"> </el-date-picker>
                            <div class="editor">
                                <Tinymce :resize="false" v-model="Plancontent" @change="handleChangePlan" width="100%" />
                            </div>
                        </el-form-item>
                        <el-form-item label="招生章程：" class="editorStudents">
                            <el-date-picker value-format="YYYY" v-model="Year" type="year" placeholder="选择年份" style="width:150px;"> </el-date-picker>
                            <div class="editor">
                                <TinymceSec :resize="false" v-model="Studentscontent" @change="handleChangeStudents" width="100%" />
                            </div>
                        </el-form-item>
                        
                        <el-form-item class="changePage">
                            <el-button type="success" @click="nextPage('first')" style="width:80px;background:#878C90;border:#878C90;">上一页</el-button>
                            <el-button type="success" @click="nextPage('third')" style="width:80px;background:#27B148">下一页</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <!-- 详细数据 -->
                <el-tab-pane label="详细数据" name="third">
                    <el-form  
                    class="detailInfo"
                    >
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="投档分数：">
                                    <el-upload
                                        class="upload-demo"
                                        drag
                                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                        multiple
                                    >
                                        <el-icon class="el-icon--upload" :size="50"><upload-filled  class="svg"/></el-icon>
                                        <div class="el-upload__text">
                                        Drop file here or <em>click to upload</em>
                                        <div class="el-upload__tip">
                                            支持格式：.xsl .xlsx, 单个文件不能超过20MB
                                        </div>
                                        </div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="专业录取分数：" >
                                    <el-upload
                                        class="upload-demo"
                                        drag
                                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                        multiple
                                    >
                                        <el-icon class="el-icon--upload" :size="50"><upload-filled  class="svg"/></el-icon>
                                        <div class="el-upload__text">
                                        Drop file here or <em>click to upload</em>
                                        <div class="el-upload__tip">
                                            支持格式：.xsl .xlsx, 单个文件不能超过20MB
                                        </div>
                                        </div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="特色专业：" class="speSubject">
                            <el-date-picker value-format="YYYY" v-model="speYear" type="year" placeholder="选择年份" style="width:150px;margin-bottom:10px"> </el-date-picker>
                            <el-input
                                v-model="speText"
                                type="textarea"
                                rows:5
                                style="width:350px;height:135px;"
                                placeholder="请输入内容"
                                resize="none"
                                maxlength="1000"
                                show-word-limit
                            />
                        </el-form-item>
                        <el-form-item label="就业情况：" >
                            <el-date-picker value-format="YYYY" v-model="jobYear" type="year" placeholder="选择年份" style="width:150px;margin-bottom:10px"> </el-date-picker>
                            <el-input
                                v-model="jobText"
                                type="textarea"
                                rows:5
                                style="width:350px;height:135px;"
                                placeholder="请输入内容"
                                resize="none"
                                maxlength="1000"
                                show-word-limit
                            />
                        </el-form-item>
                    </el-form>
                    <div class="changePage">
                        <el-button type="success" @click="nextPage('second')" style="width:80px;background:#878C90;border:#878C90;">上一页</el-button>
                        <el-button type="success" @click="complete(addRuleFormRef,'first',Plancontent,Studentscontent,)" style="width:80px;background:#27B148">完成</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import Tinymce from '../components/Tinymce/Tinymce.vue'
import TinymceSec from '../components/Tinymce/TinymceSec.vue'
import { addList }  from '@/api/axiosPlus.js'

function useBasicInfo() {
    const router = useRouter()
    // 当前默认项
    const activeName = ref('first')

    // 校验条件设置
    const schoolTelPass = (rule, value, callback) => {
        // 1、可以是“区号-电话号-分机号”或者是“(区号)电话号-分机号”格式
        // 2、区号是0开头的3～4位数字，可以没有区号
        // 3、电话号是5～8位数字，不能以0开头
        // 4、分机号是1～8位数字，可以没有分机号
        const reg = /^1[3456789]\d{9}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/

        if (value && !reg.test(value)) {
            // console.log(value);
            // console.log(reg.test(value));
            callback(new Error('请输入正确电话格式'))
        }else {
            // console.log(value);
            // console.log(reg.test(value));
            callback()
        }
    }
    const schollEmailPass = (rule, value, callback) => {
        const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (value && !reg.test(value)) {
        callback(new Error('请输入正确的邮箱格式'))
      }else {
        callback()
      }
    }
    const schoolNetPass = (rule, value, callback) => {
        let reg = /^(?:(http|https|ftp):\/\/)?((?:[\w-]+\.)+[a-z0-9]+)((?:\/[^/?#]*)+)?(\?[^#]+)?(#.+)?$/
      if (value && !reg.test(value)) {
        callback(new Error('请输入正确的网址'))
      }else {
        callback()
      }
    }
    // const provincePass = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('Please input the password again'))
    //   }else {
    //     callback()
    //   }
    // }

    // const cityPass = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('Please input the password again'))
    //   }else {
    //     callback()
    //   }
    // }

    // const batchPass = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('Please input the password again'))
    //   }else {
    //     callback()
    //   }
    // }

    // const categoryPass = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('Please input the password again'))
    //   }else {
    //     callback()
    //   }
    // }
    // 获取添加表单节点
    const addRuleFormRef = ref()
    // 院校信息
    const schoolForm =reactive({
        schoolInfo:{
            name:"",
            year:"",
            provice:"",
            city:"",
            batch:"",
            schoolAddress:"",
            schoolNet:"",
            schoolTel:"",
            schollEmail:"", 
            // 多选框
            category:[],
            nature:[],
            spelice:[],
        }, 
        category: ['综合类', '理工类', '农业类', '医药类','林业类','财经类','政法类','民族类','师范类','语言类','艺术类','体育类','无/不限制类别'],
        nature : ['公办','民办'],
        spelice : ["985","211","双一流"],
      
        // 文本框
        text: "",
        speText : "",
        jobText : "",
        // 年份选择
        fileYear: "",
        Year: "",
        speYear: "",
        jobYear: "",
        // addRules:{
        //   name:[{ validator: namePass, trigger: 'blur'}],
        //   year: [{ validator: yearPass, trigger: 'blur' }],
        //   province: [{ validator: provincePass, trigger: 'blur' }],
        //   city: [{ validator: cityPass, trigger: 'blur' }],
        //   batch: [{ validator: batchPass, trigger: 'blur' }],
        //   category: [{ validator: categoryPass, trigger: 'blur' }],
 
        // }
    })
    

    // 图片上传
    const fileList = ref([])

    const dialogImageUrl = ref('')
    const dialogVisible = ref(false)

    const handleRemove = () => {
        console.log(uploadFile, uploadFiles)
    }

    const handlePictureCardPreview = () => {
        dialogImageUrl.value = uploadFile.url
        dialogVisible.value = true
    }
    // 图片上传结束

    // 学校类别
    // const checkedCatagory = ref([])
    // 学校性质
    // const checkedNature = ref([])
    // 学校特色
    // const checkedSpelice = ref([])

    // first 下一页按钮 nextPage
    const nextPage = (name) => {
        activeName.value = name
        console.log(activeName);
    }
    
    const addRules = reactive({
      name: [
        { required: true, message: '大学名称不能为空', trigger: 'blur' },
      ],
      year:[
        {required: true, message: '办学年份不能为空', trigger: 'blur'}
      ],
      provice:[
        {required: true, message: '省份/直辖市不能为空', trigger: 'blur'}
      ],
      city:[
        {required: true, message: '所在城市不能为空', trigger: 'blur'}
      ],
      batch:[
        {required: true, message: '所属批次不能为空', trigger: 'blur'}
      ],
      category:[
        {type: 'array', required: true, message: '请选择学校类别', trigger: 'change'}
      ],
      nature:[
        {required: true, type: 'array', message: '请选择学校性质', trigger: 'change'}
      ],
      spelice:[
        {required: true, type: 'array',  message: '请选择学校特色', trigger: 'change'}
      ],
      schoolTel:[
        { validator: schoolTelPass, trigger: 'change' }
      ],
      schollEmail:[
        { validator: schollEmailPass, trigger: 'change' }
      ],
      schoolNet:[
        { validator: schoolNetPass, trigger: 'change' }
      ]
    })
 
  
    // 完成按钮
    const complete =async (formEl,name,Plancontent,Studentscontent) => {

        if (!formEl) return
        await formEl.validate(async (valid, fields) => {
        if (valid) {
            console.log('submit!')
            let data = {
                name: schoolForm.schoolInfo.name,
                sc_img: '',
                year: Number(schoolForm.schoolInfo.year),
                provice: schoolForm.schoolInfo.provice,
                city: schoolForm.schoolInfo.city,
                batch: schoolForm.schoolInfo.batch,
                especially: schoolForm.schoolInfo.spelice[0],
                nature: schoolForm.schoolInfo.nature[0],
                category: schoolForm.schoolInfo.category[0],
                address: schoolForm.schoolInfo.schoolAddress,
                Website: schoolForm.schoolInfo.schoolNet,
                Telephone: schoolForm.schoolInfo.schoolTel,
                mailbox: schoolForm.schoolInfo.schollEmail,
                introduction: schoolForm.text,
                plan: schoolForm.Year + '' + Plancontent,
                students: schoolForm.fileYear + '' + Studentscontent,
                files_fraction: '',
                Admission_fraction: '',
                esMajor: schoolForm.speYear + '' + schoolForm.speText,
                situation: schoolForm.jobYear + '' + schoolForm.jobText
            }
            console.log(data);
            // 验证成功请求接口
            let pamas = data
            const res = await addList(pamas)
            console.log(res);
            if (res.status !== 200) return ElMessage({
                    message: '添加失败',
                    type: 'error',
            })
            ElMessage({
                message: '添加成功',
                type: 'success',
            })
            router.push('/academy')
        } else {
            console.log('error submit!', fields)
            ElMessage({
            message: '请检查基本信息是否填写完整',
            type: 'warning',
            })
            activeName.value = name
        }
        })

        // router.push('/academy')
    }

    return {
        activeName,
        // checkedCatagory,
        // checkedNature,
        // checkedSpelice,
        ...toRefs(schoolForm),
        fileList,
        dialogImageUrl,
        dialogVisible,
        handleRemove,
        handlePictureCardPreview,
        nextPage,
        complete,
        addRuleFormRef,
        addRules
    }
}

export default {
    setup() {

        // 基本信息
        const { activeName, 
                schoolInfo, 
                category, 
                nature,
                spelice, 
                // checkedCatagory,
                // checkedNature,
                // checkedSpelice,
                // 文本框
                text,
                speText ,
                jobText ,
                // 年份选择
                fileYear,
                Year,
                speYear,
                jobYear,
                // 图片上传
                fileList, 
                dialogImageUrl, 
                dialogVisible, 
                handleRemove, 
                handlePictureCardPreview, 
                nextPage,
                complete,
                addRuleFormRef,
                addRules
            } = useBasicInfo()


        // 富文本框
        let Plancontent = ref('')
        let Studentscontent = ref('')
        const handleChangePlan = (item) => {
            console.log('招生计划：', item)
            Plancontent = item
        }
        const handleChangeStudents = (item) => {
            console.log('招生简章：', item)
            Studentscontent = item
        }

        return {
            activeName,
            schoolInfo,
            // disabled,
            dialogImageUrl,
            dialogVisible,
            fileList,
            // getUploadFiles,
            handleRemove,
            handlePictureCardPreview,
            // checkedCatagory,
            category,
            // checkedNature,
            nature,
            // checkedSpelice,
            spelice,
            nextPage,
            text,
            fileYear,
            Year,
            speYear,
            jobYear,
            speText,
            jobText,
            complete,
            // 富文本框
            Plancontent,
            Studentscontent,
            handleChangePlan,
            handleChangeStudents,
            // 表单验证
            addRuleFormRef,
            addRules
        }
    },
    components: {
        Tinymce,
        TinymceSec
    }
}
</script>

<style lang="less" scoped>
.addacademy{

    .title {
        font-size: 18px;
        text-align: left;
        color:black;
    }
    .el-card {
        margin-top: 20px;
        padding:6px 15px;
        border-radius: 8px;

        /deep/.el-tabs__nav{

            .is-active, .is-top{
                font-size:16px;
            }
    
        }

        #pane-first{
            .el-form{
                padding: 17px 0 0 0;
                .el-form-item {
                    .el-input {
                        width:150px;
                        height: 35px;
                        border-radius: 10px;
                    }

                    &:last-child{
                        /deep/.el-form-item__content{
                            width: 100%;
                            justify-content: flex-end;
                        }
                    }

                    .upLoad {
                        /deep/.el-upload {
                            flex-direction: column;
                            color:#666;
                            height: 110px;
                        }
                        /deep/.el-upload-list {
                            width:110px;
                            height:110px;
                        }
                    }
                }
                .schoolLogo {
                    /deep/.el-form-item__content {
                            display: flex;
                            align-content: flex-start;
                            flex-direction: column;
                            align-items: flex-start;
                            flex-direction: column;
                    }

                    .tips {
                        color:#AEAEB4;
                        font-size:10px;
                    }
                }
                .el-row{
                    text-align:left;
                }
                .el-checkbox-group{
                    text-align: left;
                }
            }
        }

        #pane-second {
            .moreInfo {
                padding: 17px 0 0 0;
                .el-input {
                        width:150px;
                        height: 35px;
                        border-radius: 10px;
                }

                .schoolAddress {
                    justify-content: flex-start;
                }
                .schoolInfo {
                    /deep/ .el-input__wrapper {
                        align-items: self-start;
        
                        // .el-input__count {
                        //     align-items: flex-end;
                        //     .el-input__count-inner {
                        //         padding: 5px 0;
                        //     }
                        // }
                    }
                    /deep/.el-textarea__inner {
                        min-height: 145px !important;
                    } 
    
                }

                .editorPlan{
                    /deep/ .el-form-item__content {
                        flex-direction: column;
                        align-items: flex-start;
                    }
                    .editor{
                        width: 520px;
                        margin-top: 10px;
                    }
                }

                .editorStudents{
                    /deep/ .el-form-item__content {
                        flex-direction: column;
                        align-items: flex-start;
                    }
                    .editor{
                        width: 520px;
                        margin-top: 10px;
                    }
                }

                .changePage {
                    /deep/ .el-form-item__content {
                        justify-content: flex-end;
                    }
                }

            }
        }

        #pane-third {
                padding: 17px 0 0 0;
            // .speSubject{
                /deep/.el-form-item__content {
                    flex-direction: column;
                    align-items: flex-start;
                }
            // }

            /deep/.el-textarea__inner {
                min-height: 135px !important;
            } 

            .changePage {
                /deep/ .el-form-item__content {
                    justify-content: flex-end !important;
                    flex-direction: unset;
                }
            }

            .upload-demo {
                .svg {
                    width:100%;
                    height:100%;
                }
            }

            /deep/.el-upload-dragger {
                height: 190px;
                width:400px;
                // margin: 0  40px ;

                .el-upload__tip {
                    margin-top:0;
                }
            }


        }
    }
}
</style>